<template>
  <div>
    <div v-for="(group, groupIndex) in groups" :key="groupIndex">
      <h4>{{ group.name }}</h4>
      <div v-for="(option, optionIndex) in group.options" :key="optionIndex">
        <p>
          <span>属性名称:</span>
          <el-input v-model="option.name"></el-input>
        </p>
        <p>
          <span>属性值:</span>
          <el-checkbox-group v-model="option.values" @change="handleCheckboxesChange">
            <el-checkbox
                v-for="(value, valueIndex) in option.values"
                :key="valueIndex"
                :label="value"
                :value="value"
            ></el-checkbox>
          </el-checkbox-group>
        </p>
        <button @click="removePropertyGroup(groupIndex)">删除</button>
      </div>
      <button @click="addNewPropertyOption">增加属性值</button>
    </div>
    <button @click="addNewPropertyGroup">增加销售属性</button>
  </div>
</template>

<script>
export default {
  props: {
    groups: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleCheckboxesChange(values) {
      console.log("Checkbox values changed:", values);
    },
    addNewPropertyOption() {
      this.groups[this.groups.length - 1].options.push({ name: "", values: [] });
    },
    addNewPropertyGroup() {
      this.groups.push({ name: "", options: [{ name: "", values: [] }] });
    },
    removePropertyGroup(index) {
      this.groups.splice(index, 1);
    },
  },
};
</script>